<template>
  <div class="content">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      v-if="!isCheck"
      :row-class-name="rowClass"
      @cell-dblclick="TableEdit"
    >
      <!-- 表格数据渲染 -->
      <el-table-column
        v-for="item in linklist"
        :key="item.id"
        :label="item.name"
        :width="item.width ? item.width : 175"
      >
        <template slot-scope="scope">
          <router-link
            :to="{ path: item.url, query: { info: scope.row } }"
            v-if="item.isRouter"
            >{{ scope.row[titleList[item.id]] }}
          </router-link>
          <template v-else>
            {{ scope.row[titleList[item.id]] }}
          </template>
        </template>
      </el-table-column>

      <!-- 按钮组件 -->
      <el-table-column
        v-if="btnState == 1"
        label="管理"
        :width="btnList.length * selWidth.tools"
      >
        <template slot-scope="scope">
          <BtnList
            :btnList="btnList"
            :rowObj="scope.row"
            @gendanGetData="gendanGetData"
            @Delorder="Delorder"
            @DelorderGoods="DelorderGoods"
            @OrderReceived="OrderReceived"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 10px"
      :height="(limit + 1) * 60"
      v-else
    >
      v-else >
      <el-table-column type="selection" :width="selWidth.checkBox">
      </el-table-column>
      <el-table-column
        v-for="item in linklist"
        :key="item.id"
        :label="item.name"
        :width="item.width ? item.width : 150"
      >
        <template slot-scope="scope">
          <router-link
            :to="{ path: item.url, query: { info: scope.row } }"
            v-if="item.isRouter"
            >{{ scope.row[titleList[item.id]] }}
          </router-link>
          <template v-else>
            {{ scope.row[titleList[item.id]] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        v-if="btnState == 1"
        label="管理"
        :width="btnList.length * selWidth.tools"
      >
        <template slot-scope="scope">
          <BtnList
            :btnList="btnList"
            :rowObj="scope.row"
            @gendanGetData="gendanGetData"
            @Delorder="Delorder"
            @DelorderGoods="DelorderGoods"
            @OrderReceived="OrderReceived"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="btnState == 2"
        label="管理"
        :width="2 * selWidth.tools"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import BtnList from "../components/TableBtn.vue";
export default {
  name: "List",
  data() {
    return {
      checkArr: [],
    };
  },

  components: {
    BtnList,
  },

  created() {},

  props: {
    // 表格模拟数据
    tableData: Array,
    // 按钮
    btnList: Array,
    // 表格模拟数据属性名
    titleList: Array,
    // 跳转路由
    linklist: Array,
    isCheck: Boolean,
    // 选择管理框宽度
    selWidth: {
      type: Object,
      default: () => {
        return {
          checkBox: 55,
          tools: 50,
        };
      },
    },
    // 管理按钮组件状态选择
    btnState: {
      type: Number,
      default: 1,
    },
    limit: {
      type: Number,
      default: 10,
    },
  },
  methods: {
    handleSelectionChange(arr) {
      this.checkArr = [];
      arr.forEach((item) => {
        this.checkArr.push(item.customer_id);
      });
      this.$emit("getCheck", this.checkArr);
    },
    rowClass({ row }) {
      if (row.documentTips === "已跟单") {
        return "table_tr";
      }
    },
    gendanGetData() {
      this.$emit("gendanGetData");
    },
    // 订单删除
    Delorder() {
      this.$emit("Delorder");
    },
    // 订单商品删除
    DelorderGoods() {
      this.$emit("DelorderGoods");
    },
    // 订单到款
    OrderReceived() {
      this.$emit("OrderReceived");
    },
    TableEdit(row, column, cell, event){
      this.$emit('TableEdit',row, column, cell, event)
    },
    
  },
};
</script>

<style lang="scss">
.table_tr,
.table_tr a,
.table_tr span {
  color: #ccc;
}
</style>